<template>
  <view>
    <view class="view-check-list">
      <view class="view-check">
        <uni-table stripe border>
          <uni-tr>
            <uni-th width="50" align="center">序号</uni-th>
            <uni-th align="center">检查落实项目</uni-th>
            <uni-th width="120" align="center">
              <text class="required__label">*</text>
              <text>检查落实情况</text>
            </uni-th>
          </uni-tr>
          <uni-tr v-for="(item, index) in processList" :key="index">
            <uni-td align="center">{{ index + 1 }}</uni-td>
            <uni-td>
              <view class="flex column">
                <text> {{ item.procedureContent }} </text>
                <image-upload
                  v-if="item.needPhoto === 'Y'"
                  state="edit"
                  :sizeTypeIndex="0"
                  :imageUrl="item.procedurePhotos"
                  size="small"
                  @change="imageOnChange($event, item)"
                ></image-upload>
              </view>
            </uni-td>
            <uni-td>
              <CuRadioGroup :list="sysYesOrNo" isColumn v-model="item.procedureResult" />
            </uni-td>
          </uni-tr>
        </uni-table>
        <Signature ref="signature" v-model="processSign" auto-upload @success="onSignatureSuccess" />
        <view class="submit-group">
          <button class="u-button-cancel" type="primary" :ripple="true" @click="submit">签字</button>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import ImageUpload from '@/components/image-upload/index.vue'
import Signature from '@/pages/jobSlip/components/ContinueSign.vue'
import CuRadioGroup from '@/components/cu-radio-group/cu-radio-group.vue'
import { getFormDetail } from '@/api/load-operation/add-load-operation.js'
export default {
  onLoad({ formId, formType, id }) {
    const eventChannel = this.getOpenerEventChannel()
    let that = this
    eventChannel.on('sendProcess', function (data) {
      console.log(data)
      if (data.processSign || data.id) {
        that.processList = data.createDockWorkProcedureReqs
      } else {
        that.getDetail(formId, formType)
      }
    })
  },
  components: {
    Signature,
    ImageUpload,
    CuRadioGroup
  },
  data() {
    return {
      saveLoading: false,
      processSign: '',
      processList: [],
      sysYesOrNo: [
        {
          value: '1',
          label: '已落实'
        },
        {
          value: '0',
          label: '未落实'
        }
      ]
    }
  },
  methods: {
    submit() {
      for (let j of this.processList) {
        if (!j.procedurePhotos && j.needPhoto === 'Y') {
          this.$modal.showToast('请上传照片')
          return
        } else if (j.procedureResult !== '1') {
          this.$modal.showToast('项目落实完成才可签字！')
          return
        }
      }
      this.$refs.signature.open()
    },
    /**
     * @description  签名成功
     */
    onSignatureSuccess() {
      this._save()
    },
    async _save() {
      this.saveLoading = true
      let that = this
      try {
        this.$modal.showToast('提交成功')
        const eventChannel = this.getOpenerEventChannel()
        eventChannel.emit('callback:success:process', {
          processSign: that.processSign,
          createDockWorkProcedureReqs: that.processList
        })
        uni.navigateBack()
      } catch (err) {
        this.saveLoading = false
      }
    },
    async getDetail(formId, formType) {
      let res = await getFormDetail({
        formId,
        formType
      })
      for (let i of res.data.procedureResps) {
        if (!i.procedurePhotos) {
          i.procedurePhotos = ''
        }
      }
      this.processList = res.data.procedureResps
    },
    imageOnChange($event, item) {
      item.procedurePhotos = $event.join(',')
    }
  }
}
</script>

<style lang="scss" scoped>
.view-check-list {
  .hidden-title {
    background: #f5f5f5;
    padding: 20rpx 30rpx;
    color: #999;
  }

  .work-img {
    width: 100rpx;
    height: 100rpx;
    display: inline-block;
    margin-right: 24rpx;
  }

  .view-check {
    margin-bottom: 110px;
  }

  .submit-group {
    background: #fff;
    z-index: 9;
    padding: 30px;
  }
}
</style>
